<!DOCTYPE html>
<html>
<head>
    <title>Live HTTP Headers</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="css/live.min.css" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/general.min.js"></script>
    <script src="js/live.min.js"></script>
</head>
<body>
    <ul class="nav nav-pills">
        <li><b>Chrome抓包工具</b></li>
        <li class="active">
            <a href="#" id="capture" class="btn btn-info">
                <i class="icon-ok-circle"></i>捕获
            </a>
        </li>
        <li>
            <a href="#" id="rawView" class="btn btn-info">
                <i class="icon-ban-circle"></i>文本
            </a>
        </li>
        <li>
            <a href="#" id="clearAll" class="btn btn-info">
                <i class="icon-remove"></i>清空
            </a>
        </li>
        <li>
            <a href="#myModal" id="settings" data-toggle="modal" class="btn btn-info">
                <i class="icon-wrench"></i>系统设置
            </a>
        </li>
    </ul>

    <table id="mainTable" class="table table-bordered table-condensed">
        <thead>
            <tr>
                <th style="width: 25px; text-align: center;">#</th>
                <th style="width: 40px; text-align: center;">Method</th>
                <th style="width: 38px; text-align: center;">Status</th>
                <th style="width: 256px;">Url</th>
                <th>Headers</th>
            </tr>
        </thead>
        <tr>
            <td colspan="4" style="width: 400px; padding: 0px;">
                <div class="results" style="overflow: auto; height: 500px; width: 400px;">
                    <table id="responseList" class="table table-condensed table-hover table-bordered">
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </td>
            <td style="padding: 0px;" id="previewArea">
                <div style="padding:10px;font-weight:bold;">
                    <p>
                        抓包工具
                    </p>
                </div>
            </td>
        </tr>
    </table>
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-header">
            <h3 id="myModalLabel">Settings</h3>
        </div>
        <div class="modal-body">
            <table class="table table-bordered">
                <tr>
                    <td>
                        <b>Capture</b><br />
                        <label class="checkbox">
                            <input id="setMainFrame" type="checkbox">
                            Document</label><br />
                        <label class="checkbox">
                            <input id="setSubFrame" type="checkbox">
                            Frames & Iframes</label><br />
                        <label class="checkbox">
                            <input id="setStylesheet" type="checkbox">
                            Stylesheets</label><br />
                        <label class="checkbox">
                            <input id="setScript" type="checkbox">
                            Scripts</label><br />
                        <label class="checkbox">
                            <input id="setImage" type="checkbox">
                            Images</label><br />
                        <label class="checkbox">
                            <input id="setXHR" type="checkbox">
                            XMLHttpRequests</label><br />
                        <label class="checkbox">
                            <input id="setObject" type="checkbox">
                            Objects</label><br />
                        <label class="checkbox">
                            <input id="setOther" type="checkbox">
                            Other</label><br />
                    </td>
                    <td>
                        <b>View headers</b><br />
                        <label class="checkbox">
                            <input type="radio" name="viewType" id="viewTypeRaw" />
                            Raw</label><br />
                        <label class="checkbox">
                            <input type="radio" name="viewType" id="viewTypeNice" />
                            Formated</label><br />
                        <br />
                        <b>View list</b><br />
                        <label class="checkbox">
                            <input type="radio" name="orderType" id="listAscending" />
                            Ascending order</label><br />
                        <label class="checkbox">
                            <input type="radio" name="orderType" id="listDescending" />
                            Descending order</label><br />
                        <br />
                    </td>
                </tr>
            </table>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</a>
            <a href="#" id="saveSettings" class="btn btn-success">Save changes</a>
        </div>
    </div>

</body>
</html>
